<template>
  <div class="list-page">
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
                        <Button
                          size="small"
                          @click="modifyItem(row)"
                          v-if="
                            Validation.check(Resources.MEMBER_UPDATE)
                          "
                          type="info"
                        >配置等级
                        </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
  </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import { Route } from 'vue-router';
    import { LvBloc } from './LvBloc';
    import { Lv } from '@/base/model/Lv';
    import { formatDate } from '@/base/util/Dates';
    import { Validation } from '@/base/Validation';
    import { Resources } from '@/base/Resources';

    const columns = (bloc: LvBloc) => [
        {
            title: '等级',
            key: 'lv',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: 'Lv' + params.row.lv
                    },
                    style: {
                        'color': '#ffa500'
                    }
                });
            },
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '等级名称',
            key: 'name',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: params.row.name
                    }
                });
            },
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '升级条件',
            key: 'upgradeCondition',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: params.row.upgradeCondition === 0 ? '注册会员'
                            : '成长值大于等于' + params.row.upgradeCondition
                    }
                });
            },
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        // {
        //     title: '会员权益',
        //     key: 'benefitname',
        //     align: 'left',
        //     minWidth: 120,
        //     tooltip: true
        // },
        {
            title: '最后修改时间',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: formatDate(
                            new Date(params.row.updatetime),
                            'yyyy-MM-dd hh:mm:ss'
                        )
                    }
                });
            },
            width: 160,
            align: 'left',
            tooltip: true
        },
        {
            title: '操作',
            slot: 'action',
            width: 200,
            align: 'left',
            fixed: 'right'
        }
    ];

    @Component
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc
                    .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
                    .catch((e) => {
                        vm.$Message.error('操作错误');
                    });
            });
        }
        bloc: LvBloc = new LvBloc();
        Validation = Validation;
        Resources = Resources;
        columns = columns(this.bloc);
        modifyItem(dataItem: Lv) {
            const num:string = JSON.stringify(dataItem);
            this.$router.push({path: `/lv/edit/`, query: {param: num}});
        }

    }

</script>

<style lang="less">
</style>
